<template>
	<view>
		<view class="dt">
			<view class="title">地址信息：</view>
			<!-- <view v-if="!message.id" class="navs uniBtn" @click="choose">
				<view class="name">收货地址：</view>
				<view class="uniFlex">
					<view class="pcs">请选择</view>
					<img class="icon" src="../../static/bg/icons.png" alt="">
				</view>
			</view> -->
			<view>
				<view class="navs uniFlex2">
					<view class="name">收货地址：</view>
					<view>{{user.province_name}}{{user.city_name}}{{user.area_name}}</view>
				</view>
				<view class="navs uniFlex2">
					<view class="name">详细地址：</view>
					<view>{{user.address}}</view>
				</view>
				<view class="navs uniFlex2">
					<view class="name">收货人：</view>
					<view>{{user.name}}</view>
				</view>
				<view class="navs uniFlex2">
					<view class="name">收货人电话：</view>
					<view>{{user.phone}}</view>
				</view>
			</view>
		</view>

		<view class="dt">
			<view class="title">支付信息：</view>
			<!-- <view class="navs uniBtn">
				<view class="name">取药方式：</view>
				<view class="info2">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="title">
						<view class="uniEnd">
							<view class="pcs" v-if="!arrayId1">请选择</view>
							<view v-else>{{arrayName1}}</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">支付方式：</view>
				<view class="info2">
					<picker @change="bindPickerChange2" :value="index2" :range="array2" range-key="title">
						<view class="uniEnd">
							<view class="pcs" v-if="!arrayId2">请选择</view>
							<view v-else>{{arrayName2}}</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view> -->
			<view class="navs uniBtn2">
				<view class="name">备注：</view>
				<view class="info2">
					<view class="uniFlex2">
						<textarea style="height: 200upx;" v-model="remark" maxlength="-1" placeholder="请输入备注"
							placeholder-class="pcs2"></textarea>
					</view>
				</view>
			</view>
		</view>

		<view class="dt" v-if="djj>0">
			<view class="navs uniBtn">
				<view class="name">是否使用代金券：</view>
				<switch :checked="checked" @change="switch1Change" />
			</view>
		</view>
		<view class="dt">
			<view class="navs uniBtn">
				<view class="name">费用(不含配送费)：</view>
				<view style="color:#F86C53;">{{list.price}}￥</view>
			</view>
		</view>

		<view class="base" v-show="djj>0">代金券使用规则：满100元减10元，可累积</view>

		<view class="btnStyle" @click="submit">立即支付</view>
		<view class="btnStyle" style="background: #1677D2;margin-top: 20rpx;" @click="submit2">返回首页</view>
		<view style="height: 35upx;"></view>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module')
	// #endif
	import {
		jiesuan,
		jiesuan_pay
	} from '@/request/api.js';
	import commonUtil from "../../components/utils/format.js";
	export default {
		data() {
			return {
				id: '',
				list: {
					number: '',
					price: ''
				},
				user:{},
				djj: 0,
				checked: false,
				// message: {
				// 	id: '',
				// 	name: "",
				// 	phone: "",
				// 	province_name: "",
				// 	city_name: "",
				// 	area_name: "",
				// 	address: ""
				// },
				// array: [
				// 	{id:'1',title:'快递'},
				// 	{id:'2',title:'云药房'}
				// ],
				// index: -1,
				// arrayId1:'',
				// arrayName1:'',

				// array2: [
				// 	{id:'1',title:'支付宝'},
				// 	{id:'2',title:'微信'}
				// ],
				// index2: -1,
				// arrayId2:'',
				// arrayName2:'',
				remark: '',
				price: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			jiesuan({
				id: options.id
			}).then(res => {
				this.list = res.data;
				this.user = res.data.user;
				this.djj = res.data.user.djj;
			})
		},

		methods: {
			switch1Change: function(e) {
				this.checked = e.detail.value;
				console.log('switch1 发生 change 事件，携带值为', this.checked)
			},
			// choose() {
			// 	uni.navigateTo({
			// 		url: '/pages/myAddress/myAddress'
			// 	})
			// },
			// bindPickerChange(e) {
			// 	this.index = e.target.value
			// 	this.arrayId1 = this.array[e.target.value].id
			// 	this.arrayName1 = this.array[e.target.value].title
			// },

			// bindPickerChange2(e) {
			// 	this.index2 = e.target.value
			// 	this.arrayId2 = this.array2[e.target.value].id
			// 	this.arrayName2 = this.array2[e.target.value].title
			// },
			submit2(){
				window.location.href = getApp().globalData.baseUrlImg + '/h5/?companyId='+uni.getStorageSync('companyId')
			},
			submit() {
				// if (!this.message.id) {
				// 	uni.showToast({
				// 		title: '请选择地址',
				// 		icon: "none"
				// 	})
				// 	return
				// }
				let djj = 0;
				if(this.checked){
					djj = 1;
				}
				let param = {
					id: this.id,
					djj: djj,
					qyfs: 1,
					// address_id: this.message.id,
					openid: uni.getStorageSync('openid'),
					remark: this.remark
				}
				jiesuan_pay(param).then(res => {
					uni.showLoading({
						title: '支付中......',
						icon: 'none',
						mask: true
					});
					if (res.data.paySign != '') {
						jweixin.config({
							// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.paySign, // 必填，签名
							jsApiList: [ //这里是需要用到的接口名称  
								'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
								// 'onMenuShareAppMessage', //分享接口  
								// 'getLocation', //获取位置  
								// 'openLocation', //打开位置  
								// 'scanQRCode', //扫一扫接口  
								'chooseWXPay', //微信支付  
								// 'chooseImage', //拍照或从手机相册中选图接口  
								// 'previewImage', //预览图片接口  
								// 'uploadImage' //上传图片  
							], // 必填，需要使用的JS接口列表
							openId: uni.getStorageSync('openid')
						});
						//付款
						jweixin.chooseWXPay({
							appId: res.data.appId,
							timestamp: res.data
							.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32
							package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							paySign: res.data.paySign, // 支付签名
							success: function(ret) {
								//跳转到支付成功页面有这个页面
								// routes.push({
								// 	path: 'download'
								// });
								uni.hideLoading();
								uni.showToast({
									title: "付款成功！",
									duration: 1000
								})
								setTimeout(function() {
									uni.reLaunch({
										url: '/pages/my/my'
									})
								}, 800)
							},
							cancel: function(res) {
								uni.hideLoading();
								uni.showToast({
									title: "付款失败！",
									icon: 'none',
									duration: 1000
								})
							},
							fail: function(res) {
								uni.hideLoading();
								uni.showToast({
									title: "付款失败！",
									icon: 'none',
									duration: 1000
								})
							}
						});
					} else {
						uni.hideLoading();
						uni.showToast({
							title: "获取用户签名信息失败",
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.dt {
		background: #ffffff;
		padding: 20upx 30upx;
		font-size: 30upx;
		margin-bottom: 30upx;

		.title {
			font-size: 32upx;
			font-weight: bold;
		}

		.navs {
			margin: 20upx 0;

			.name {
				width: 165upx;
				flex-shrink: 0;
				white-space: nowrap;
				color: #414141;
			}

			.icon {
				width: 45upx;
				height: 45upx;
				margin-left: 15upx;
			}

			.info2 {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				text-align: right;

				input,
				picker,
				textarea {
					width: 460upx;
				}

				img {
					width: 45upx;
					height: 45upx;
					margin-left: 15upx;
				}

				.input2 {
					width: 80upx;
					border-bottom: 1px solid #CCCCCC;
					text-align: center;
				}

				.fast {
					margin-left: 30upx;
					background: #F86C53;
					border-radius: 45upx;
					padding: 10upx 35upx;
					font-size: 28upx;
					color: #ffffff;
				}
			}
		}

		.navsAdd {
			text-align: center;
			border: 1px dashed #F86C53;
			border-radius: 40upx;
			padding: 15upx 45upx;
			color: #F86C53;
			background: #FFF2F7;
			width: 260upx;
			margin: 45upx auto;
		}


	}

	.base {
		margin: 30rpx 30rpx 120rpx 30rpx;
		color: #F86C53;
	}
</style>